<script setup lang="ts">
import { Highlight } from "vant";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const keywords = ref("br11.com");
const text = ref(t("distriAgentFAQ.title1"));
const textContent = ref(t("distriAgentFAQ.titleText1"));
const textContent2 = ref(t("distriAgentFAQ.titleText3"));
const keywords2 = ref(t("distriAgentFAQ.winOrlose"));
const textContent3 = ref(t("distriAgentFAQ.title5Text1"));
</script>
<template>
  <div class="illustrate-frame">
    <div class="content-div">
      <div class="highlight-frame">
        <Highlight
          :keywords="keywords"
          :source-string="text"
          unhighlight-class="ccdc"
          highlight-class="custom-class"
        />
      </div>
      <div class="highlight-content-frame">
        <Highlight
          :keywords="keywords"
          :source-string="textContent"
          unhighlight-class="ccdc2"
          highlight-class="custom-class"
        />
      </div>
    </div>
    <div class="content-div">
      <div class="subheading-frame">{{ t("distriAgentFAQ.title2") }}</div>
      <div class="subheading-content">{{ t("distriAgentFAQ.titleText2") }}</div>
    </div>
    <div class="content-div">
      <div class="subheading-frame2">{{ t("distriAgentFAQ.title3") }}</div>
      <div class="highlight-content-frame">
        <Highlight
          :keywords="keywords"
          :source-string="textContent2"
          unhighlight-class="ccdc2"
          highlight-class="custom-class"
        />
      </div>
    </div>
    <div class="content-div">
      <div class="subheading-frame">{{ t("distriAgentFAQ.title4") }}</div>
      <div class="subheading-content subheading-content2">
        {{ t("distriAgentFAQ.titleText4") }}
      </div>
    </div>
    <div class="content-div">
      <div class="subheading-frame3">{{ t("distriAgentFAQ.titleText5") }}</div>
      <img class="afiliado" src="@/image/new_img/activity/afiliado.png" />
      <div class="highlight-content-frame">
        <Highlight
          :keywords="keywords2"
          :source-string="textContent3"
          unhighlight-class="ccdc2"
          highlight-class="custom-class"
        />
      </div>
      <div class="subheading-content subheading-content3">
        {{ t("distriAgentFAQ.title5Text2") }}
      </div>
    </div>
    <div class="content-div calculation-rules">
      <div class="title-frame1 df ai-center jc-center">{{ t("distriAgentFAQ.title6") }}</div>
      <div class="calculation-title-frame df ai-center">
        <img
          class="atividades-img"
          src="@/image/new_img/activity/distriAgent/atividades_faq_head_1.png"
        />
        <div class="atividades-text">{{ t("distriAgentFAQ.titleText6") }}</div>
      </div>
      <div class="tips2-item3">
        {{ t("distriAgentFAQ.titleText6con1") }} <span style="color: #ffee00"> 34K</span>,
        {{ t("distriAgentFAQ.titleText6con2") }}
      </div>
      <div class="tips2-item31">680</div>
      <div class="tips3-frame3 df ai-center jc-center">
        <div class="tips3-text1">
          <div class="">{{ t("distriAgentFAQ.titleText6con3") }} B1</div>
          <div class="bright-text1">80</div>
        </div>
        <img
          class="tips3-arrow1"
          src="@/image/new_img/activity/distriAgent/atividades_faq_icon_2.png"
        />
        <img
          class="tips3-arrow2"
          src="@/image/new_img/activity/distriAgent/atividades_faq_icon_3.png"
        />
        <img
          class="tips3-arrow3"
          src="@/image/new_img/activity/distriAgent/atividades_faq_icon_4.png"
        />
        <div class="tips3-text5">
          <div class="">{{ t("distriAgentFAQ.titleText6con3") }} B3</div>
          <div class="bright-text1">400</div>
        </div>
      </div>
      <div class="tips3-text3">
        {{ t("distriAgentFAQ.titleText6con3") }} B2: <span class="yellow">200</span>
      </div>
      <div class="tips4-frame df ai-center jc-space-between">
        <div class="tips4-item">
          <img
            class="tips4-item-avatar"
            src="@/image/new_img/activity/distriAgent/atividades_faq_head_2.png"
          />
          <div class="tips4-item-info">
            B1 {{ t("distriAgentFAQ.titleText6con4") }}
            <br />
            <span class="yellow">200</span>/10k
          </div>
          <div class="tips4-item-bottom-dianzi"></div>
          <div class="tips4-item-bottom">
            <span class="text1">{{ t("distriAgentFAQ.titleText6con5") }}</span>
            <div class="text2">4K</div>
          </div>
        </div>
        <div class="tips4-item">
          <img
            class="tips4-item-avatar"
            src="@/image/new_img/activity/distriAgent/atividades_faq_head_3.png"
          />
          <div class="tips4-item-info">
            B2 {{ t("distriAgentFAQ.titleText6con4") }}
            <br />
            <span class="yellow">200</span>/10k
          </div>
          <div class="tips4-item-bottom-dianzi"></div>
          <div class="tips4-item-bottom">
            <span class="text1">{{ t("distriAgentFAQ.titleText6con5") }}</span>
            <div class="text2">10K</div>
          </div>
        </div>
        <div class="tips4-item">
          <img
            class="tips4-item-avatar"
            src="@/image/new_img/activity/distriAgent/atividades_faq_head_4.png"
          />
          <div class="tips4-item-info">
            B3 {{ t("distriAgentFAQ.titleText6con4") }}
            <br />
            <span class="yellow">200</span>/10k
          </div>
          <div class="tips4-item-bottom-dianzi"></div>
          <div class="tips4-item-bottom">
            <span class="text1">{{ t("distriAgentFAQ.titleText6con5") }}</span>
            <div class="text2">20K</div>
          </div>
        </div>
      </div>
      <div class="tips7-frame">
        <div class="ftitle">{{ t("distriAgentFAQ.titleText6con6") }}</div>
        <div class="fcontent">
          {{ t("distriAgentFAQ.titleText6con7") }}
        </div>
        <div class="ftitle marginTop16">
          {{ t("distriAgentFAQ.titleText6con8") }}
        </div>
        <div class="fcontent">
          {{ t("distriAgentFAQ.titleText6con9") }} <br />{{ t("distriAgentFAQ.titleText6con10")
          }}<br />
          {{ t("distriAgentFAQ.titleText6con11") }}
        </div>
      </div>
    </div>
    <div class="content-div">
      <div class="subheading-frame">{{ t("distriAgentFAQ.title7") }}</div>
      <div class="subheading-content subheading-content2">
        {{ t("distriAgentFAQ.title7Text6con1") }}
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.illustrate-frame {
  width: 100%;
  height: auto;
  padding-top: 22px;
  padding-bottom: 60px;
  .content-div {
    width: 100%;
    height: auto;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 27.236px;
    padding-bottom: 27.236px;
    margin-top: 16px;
    border-radius: 27.236px;
    .subheading-frame {
      width: 80%;
      height: auto;
      font-size: 32px;
      color: #ffffff;
      text-align: center;
      font-weight: 700;
      margin: auto;
      line-height: 44px;
    }
    .subheading-content {
      width: 92%;
      font-size: 24px;
      color: #ffffff;
      margin: auto;
      margin-top: 20px;
    }
    .subheading-content3 {
      line-height: 30px;
      margin-top: 10px;
    }
  }
  .calculation-rules {
    padding-top: 0;
    .title-frame1 {
      font-size: 40px;
      color: #ffffff;
      font-weight: 700;
      text-align: center;
      height: 136px;
      border-radius: 16px;
      background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 100%
      );
    }
    .calculation-title-frame {
      width: 100%;
      margin-left: 42px;
      height: auto;
      padding-top: 34px;
      .atividades-img {
        width: 166px;
        height: 166px;
        margin-right: 14px;
      }
      .atividades-text {
        width: 338px;
        font-size: 32px;
        font-weight: 700;
        color: #ffffffa6;
        line-height: 44px;
      }
    }
    .tips2-item3 {
      font-size: 24px;
      color: #ffffff;
      font-weight: 400;
      width: 100%;
      text-align: center;
      margin-top: 34px;
    }
    .tips2-item31 {
      color: #ffee00;
      font-weight: 700;
      font-size: 40px;
      width: 100%;
      text-align: center;
      margin-top: 10px;
    }
    .tips3-frame3 {
      width: 100%;
      height: auto;
      position: relative;
      left: 0;
      top: 0;
      .tips3-arrow1 {
        width: 134px;
        height: 166px;
        padding-top: 64px;
        margin-right: 40px;
      }
      .tips3-arrow2 {
        width: 134px;
        height: 166px;
      }
      .tips3-arrow3 {
        width: 134px;
        height: 166px;
        padding-top: 64px;
        margin-left: 40px;
      }
      .tips3-text1 {
        position: absolute;
        left: 0;
        top: 80px;
        z-index: 1;
        transform: rotate(-45deg);
        color: #ffffff;
        font-size: 24px;
      }
      .tips3-text5 {
        position: absolute;
        right: 0;
        top: 80px;
        z-index: 1;
        transform: rotate(45deg);
        color: #ffffff;
        font-size: 24px;
      }
      .bright-text1 {
        text-align: center;
        color: #ffee00;
        font-weight: 700;
      }
    }
    .tips3-text3 {
      width: 100%;
      text-align: center;
      color: #ffffff;
      font-size: 24px;
    }
    .tips4-frame {
      width: 608px;
      min-height: 376px;
      height: auto;
      margin: auto;
      margin-top: 20px;
      .tips4-item {
        width: 184px;
        min-height: 376px;
        height: auto;
        border-radius: 16px;
        background: #bb0086;
        text-align: center;
        position: relative;
        left: 0;
        top: 0;
        .tips4-item-avatar {
          width: 133px;
          height: 133px;
          margin-top: 16px;
        }
        .tips4-item-info {
          width: 70%;
          height: auto;
          margin: auto;
          color: #ffffffd9;
          font-size: 24px;
          margin-top: 20px;
          line-height: 30px;
          padding-bottom: 10px;
        }
        .tips4-item-bottom {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 100px;
          color: #ffffff;
          background: #ff00b6;
          border-bottom-left-radius: 16px;
          border-bottom-right-radius: 16px;
          .text1 {
            font-size: 24px;
            font-weight: 700;
            white-space: nowrap;
          }
          .text2 {
            font-size: 28px;
            font-weight: 700;
            text-align: center;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
.custom-class {
  font-weight: 700;
  font-size: 24px;
  padding-top: 27.236px;
}
.ccdc {
  width: 100%;
  padding-top: 27.236px;
  color: #ffffff;
  font-weight: 700;
  font-size: 32px;
}
:deep(.van-highlight__tag) {
  color: #ffee00;
  font-size: 32px;
}
:deep(.ccdc) {
  color: #ffffff;
  font-weight: 700;
  font-size: 32px;
  line-height: 46px;
}
:deep(.van-highlight) {
  line-height: 30px;
}
.highlight-frame {
  width: 90%;
  height: auto;
  margin: auto;
  text-align: center;
}
.highlight-content-frame {
  width: 92%;
  margin: auto;
  height: auto;
  margin-top: 13px;
  text-align: left;
  :deep(.van-highlight__tag) {
    color: #ffee00;
    font-size: 24px;
  }
}
.ccdc2 {
  font-size: 24px;
}
:deep(.ccdc2) {
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
  text-align: left;
}
.subheading-frame2 {
  width: calc(100% - 68px);
  height: auto;
  font-size: 32px;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  margin-left: 34px;
  line-height: 48px;
}
.subheading-content2 {
  line-height: 40px;
}
.subheading-frame3 {
  width: calc(100% - 68px);
  height: auto;
  font-size: 28px;
  margin: auto;
  text-align: center;
  color: #ffffff;
  line-height: 40px;
}
.afiliado {
  width: 100%;
  height: auto;
}
.yellow {
  color: #ffee00;
}
.tips7-frame {
  width: calc(100% - 68px);
  height: auto;
  margin: auto;
  margin-top: 24px;
  .ftitle {
    font-size: 24px;
    color: #ffffffd9;
    font-weight: 700;
    height: auto;
    line-height: 40px;
  }
  .fcontent {
    width: 100%;
    color: #ffffffa6;
    font-size: 24px;
    line-height: 40px;
  }
}
.marginTop16 {
  margin-top: 16px;
}
.tips4-item-bottom-dianzi {
  width: 100%;
  height: 100px;
}
</style>
